import React from 'react';

interface ProgressBarProps {
  progress: number;
  label?: string;
  isVisible: boolean;
}

const ProgressBar: React.FC<ProgressBarProps> = ({ 
  progress, 
  label = 'Training Progress', 
  isVisible 
}) => {
  if (!isVisible) return null;
  
  return (
    <div className="bg-white rounded-lg border border-gray-200 p-4 shadow-sm">
      <div className="flex justify-between items-center mb-2">
        <div className="text-sm font-medium text-gray-700">{label}</div>
        <div className="text-sm text-gray-500">{Math.round(progress)}%</div>
      </div>
      <div className="w-full bg-gray-200 rounded-full h-2.5 mb-2">
        <div
          className="bg-blue-600 h-2.5 rounded-full transition-all duration-300 ease-in-out"
          style={{ width: `${progress}%` }}
        ></div>
      </div>
    </div>
  );
};

export default ProgressBar;